<template>
  <!----------------------进件列表（主要用于进件管理相关页面） ---------------------
* @auto       kyle
* @date       2020-7-28
* @inrto      进件列表通用组件
* @props      list为传入的数据列表
*             btnText为按钮名称对象，包含leftText，centerText，rightText三个属性
* @function   clickLeft，clickCenter，clickRight对外三个方法，传出的值为当前进件的AccountNo
  -->
  <div>
    <div v-for="(item,index) in paperList" :key="index" class="item mlr-30 pb-30">
      <div class="item-box pd-25 bg-white br-10">
        <div class="content flex-s-c">
          <!-- <img class="br-12 mr-20" :src="item.imgUrl" /> -->
          <headPortrait-box class="br-12 pos-r is-106 mr-20" :headPortraitUrl="item.HeadPortrait"></headPortrait-box>
          <div class="flex flex-d-c flex-2 hb">
            <h1 class="fs-32 fw-600">{{ item.RealName }}</h1>
            <span class="color-gray-light">{{ item.TelNumber }}</span>
          </div>
        </div>
        <div class="pt-25 flex-fe-c">
          <van-button
            v-if="btnText.leftText"
            class="hollow-btn btn ml-30"
            round
            @click="clickLeft(item.AccountNo)"
          >{{btnText.leftText}}</van-button>
          <van-button
            v-if="btnText.centerText"
            class="hollow-btn btn ml-30"
            round
            @click="clickCenter(item.AccountNo)"
          >{{btnText.centerText}}</van-button>
          <van-button
            v-if="btnText.rightText"
            class="solid-btn btn ml-30"
            round
            @click="clickRight(item.AccountNo)"
          >{{btnText.rightText}}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
export default {
  name: 'paperList',
  components: { headPortraitBox },
  props: {
    // 进件列表
    list: {
      type: Array,
      required: true,
      default: function() {
        return []
      }
    },
    btnText: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    clickLeft(val) {
      this.$emit('clickLeft', val)
    },
    clickCenter(val) {
      this.$emit('clickCenter', val)
    },
    clickRight(val) {
      this.$emit('clickRight', val)
    }
  },
  computed: {
    paperList() {
      let Arr = this.list
      return Arr
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  &:first-child {
    padding-top: 30px;
  }
  .item-box {
    width: 100%;
    .content {
      div {
        height: 106px;
      }
    }
    .btn {
      flex-shrink: 0;
      height: 54px;
      line-height: 54px;
      font-size: 24px;
      min-width: 160px;
    }
  }
}
</style>
